
function htmfun() {
    setInterval(function () {
        //创建div
        var fontObj = document.createElement('div')
        //div设置了样式
        fontObj.className = 'font'

        var min = 0
        var max = 25
        var index = Math.floor(Math.random() * (max - min + 1) + min)
        fontObj.innerText = 'ABCDEFGHIJKLMNOPQRSTUVWSYZ'.split('')[index]

        var leftMin = 0
        var leftMax = (window.innerWidth || document.documentElement.clientWidth)
        var left = Math.floor(Math.random() * (leftMax - leftMin + 1) + leftMin)
        var topMin = 0
        var topMax = (window.innerHeight || document.documentElement.clientHeight)
        var top = Math.floor(Math.random() * (topMax - topMin + 1) + topMin)
        fontObj.style.position = 'absolute'
        fontObj.style.fontSize = '40' + 'px'
        fontObj.style.color = randomColor()
        fontObj.style.left = left + 'px'
        fontObj.style.top = top + 'px'

        document.body.appendChild(fontObj)
    }, 500)
}
function randomColor() {
    var colorArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']
    var min = 0
    var max = colorArr.length - 1
    var first = colorArr[Math.floor(Math.random() * (max - min + 1) + min)]
    var two = colorArr[Math.floor(Math.random() * (max - min + 1) + min)]
    var three = colorArr[Math.floor(Math.random() * (max - min + 1) + min)]
    var four = colorArr[Math.floor(Math.random() * (max - min + 1) + min)]
    var five = colorArr[Math.floor(Math.random() * (max - min + 1) + min)]
    var six = colorArr[Math.floor(Math.random() * (max - min + 1) + min)]
    return '#' + first + two + three + four + five + six
}
// 网页加事件监控键盘松开
document.onkeyup = function (evt) {
    var e = evt || window.event
    console.log('你松开键盘啦', e.key)

    // 直接从页面删除  并统计个数
    var fonts = document.querySelectorAll('div.font')
    fonts.forEach(function (item) { // item就是每个存放字母的盒模型

        if (item.innerText.toLowerCase() === e.key.toLowerCase()) {
            item.style.color = 'yellowgreen'
            item.style.fontWeight = 'bolder'
            item.style.fontSize = '70' + 'px'
            window.setTimeout(function () {
                // 1 删掉
                document.body.removeChild(item)
                // 2 统计+1
                var num = parseInt(document.querySelector('h1').innerText)
                document.querySelector('h1').innerText = num + 1
            }, 200)

        }

    })
}
